/* eslint-disable react/sort-comp */
/* eslint-disable react/no-array-index-key */
/* eslint-disable react/no-unescaped-entities */
/* eslint-disable react/no-unused-state */
/* eslint-disable @typescript-eslint/no-unused-vars */
/* eslint-disable jsx-a11y/alt-text */
/**
 * Created by zhangsong on 2019-05-08.
 */
import PDFPreview from '@/components/PDFPreview';
import ReaderCard from '@/components/ReaderCard/contractorIndex';
import Power from '@/constants/power';
import CreatableSelect from 'react-select/creatable';
import Authorized from '@/utils/Authorized';
import React, { Component } from 'react';
import {
  Form,
  Input,
  Popconfirm,
  Button,
  Radio,
  Result,
  Icon,
  Spin,
  Row,
  Col,
  Modal,
  Tooltip,
  Checkbox,
  Select,
  Upload,
  DatePicker,
} from 'antd';
import moment from 'moment';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { connect } from 'dva';
import { formatMessage, FormattedMessage, getLocale } from '@/utils/i18n';
import { TemporaryApplication, ContractorApplication } from '@/constants/routes';
import { getPageQuery } from '@/utils/utils';
import TemporaryReducer from '@/dva/application/temporary';
import UserReducer from '@/dva/user';
import domtoimage from 'dom-to-image';
import Style from './index.module.scss';
import { downloadZip } from '@/utils/attachment';
import { datetimeFormat, WorkCardDefault } from '@/constants/styleConfig';

const { Namespace, Effects } = TemporaryReducer;

@connect(
  state => ({
    contractorStore: state[Namespace],
    userStore: state[UserReducer.Namespace],
  }),
  dispatch => ({
    getById: data =>
      dispatch({
        type: `${Namespace}/${Effects.getContractorById}`,
        data,
      }),
    getPreviewPdfById: id =>
      dispatch({
        type: `${Namespace}/${Effects.getPreviewPdfById}`,
        data: {
          id,
        },
      }),
    handPDFModalCancel: () =>
      dispatch({
        type: `${Namespace}/${Effects.handPDFModalCancel}`,
        data: {},
      }),
    handleApproval: data =>
      dispatch({
        type: `${Namespace}/${Effects.approval}`,
        data,
      }),
    handleDisapproval: data =>
      dispatch({
        type: `${Namespace}/${Effects.disapproval}`,
        data,
      }),
    listSubcontractor() {
      dispatch({
        type: `${Namespace}/${Effects.listSubcontractor}`,
      });
    },
  }),
)
@Form.create()
class Index extends Component {
  constructor(props) {
    super(props);
    const obj = getPageQuery();
    this.state = {
      id: obj.id,
      previewImage: '',
      previewVisible: false,
      uploadPdfPreviewVisible: false,
      pdfUploadReview: '',
      readerCardModal: false,
      disabled: true,
      pdfDownLoading: false,
      qrcodemodal: false,
      outModal: false,
      menuIsOpen: false,
      creatSeleteModal: false,
    };
  }

  componentDidMount() {
    const { id } = this.state;
    const { getById, listSubcontractor, form } = this.props;
    getById(id);
    listSubcontractor();
  }

  toHtml2Canvas = () => {
    const { id } = this.state;
    const { contractorStore = {} } = this.props;
    const { contractorInfo } = contractorStore;
    this.setState(
      {
        disabled: false,
        pdfDownLoading: true,
      },
      () => {
        setTimeout(() => {
          const element = document.querySelector('#staffDetailBody');
          domtoimage
            .toJpeg(element)
            .then(dataUrl =>
              downloadZip(
                {
                  id,
                  type: 'temp',
                  base64: dataUrl,
                },
                `${contractorInfo.pass_numberd}_${contractorInfo.name}.zip`,
              ),
            )
            .then(() => {
              this.setState({
                disabled: true,
                pdfDownLoading: false,
              });
            })
            .catch(error => {
              console.error('oops, something went wrong!', error);
              alert(`error:${error.message}`);
              this.setState({
                disabled: true,
                pdfDownLoading: false,
              });
            });
        }, 500);
      },
    );
  };

  trdPass = () => {
    const { history, contractorStore = {} } = this.props;
    const { contractorInfo = {} } = contractorStore;
    const { id } = this.state;
    history.push(`${ContractorApplication.add.url}?id=${id}`);
  }

  handleGoBack = () => {
    const { history } = this.props;
    history.goBack();
  };

  handleUpdate = () => {
    const { history } = this.props;
    const { id } = this.state;
    history.push(`${TemporaryApplication.modify.url}?id=${id}`);
  };

  onPreviewClick = () => {
    this.setState({
      qrcodemodal: true,
    })
  };

  onPreviewClickSure = () => {
    const { handPDFModalCancel } = this.props;
    handPDFModalCancel();
  };

  // 显示头像预览
  handlePhotographPreview = async file => {
    if (file.url && file.url.endsWith('.pdf')) {
      this.setState({
        uploadPdfPreviewVisible: true,
        pdfUploadReview: file.url,
      });
      return;
    }

    this.setState({
      previewImage: file.url || file.preview,
      previewVisible: true,
    });
  };

  handlePhotographClose = () => {
    this.setState({
      previewImage: '',
      previewVisible: false,
    });
  };

  handleUploadPDFCancel = () => {
    this.setState({
      uploadPdfPreviewVisible: false,
      pdfUploadReview: '',
    });
  };

  onApprovalClick = () => {
    const { handleApproval } = this.props;
    const { id } = this.state;
    handleApproval({ id });
  };

  onDisapprovalClick = () => {
    const { handleDisapproval } = this.props;
    const { id } = this.state;
    handleDisapproval({ id });
  };

  openRegisterEface = () => {
    this.setState({
      readerCardModal: true,
    });
  };

  closeRegisterEface = () => {
    this.setState({
      readerCardModal: false,
    });
  };

  submitRegisterCard = () => {
    const { getById } = this.props;
    const { id } = this.state;
    this.setState({
      readerCardModal: false,
    });
    getById(id);
  };

  render() {
    const { form, contractorStore = {}, userStore = {} } = this.props;
    const { getFieldDecorator } = form;
    const {
      previewVisible,
      previewImage,
      uploadPdfPreviewVisible,
      pdfUploadReview,
      readerCardModal,
      disabled,
      pdfDownLoading,
      qrcodemodal,
      outModal,
      menuIsopen,
      creatSeleteModal,
    } = this.state;
    const {
      contractorInfo = {},
      detailLoading,
      pdfPreviewVisible,
      pdfReview,
      pdfLoading,
      mainContractorList,
    } = contractorStore;
    const { area, workerType, currentUser } = userStore;
    const { subcontractor } = contractorStore;
    let subcontractorInfo = null;
    if (Array.isArray(subcontractor)) {
      subcontractorInfo = subcontractor.find(
        item => item.id === contractorInfo.contract_subcontractor_id,
      );
    }
    const zoneTips = Array.isArray(area) ? (
      <div className={Style.zoneTipsWrapper}>
        {area.map(item => (
          <div
            key={item.id + (getLocale() === 'en-US' ? item.areaDescEn : item.areaDescZh)}
            className={Style.zoneTipsRow}
          >
            <div className={Style.zoneTipsLabel}>{item.areaCode}</div>
            <div>=</div>
            <div>{getLocale() === 'en-US' ? item.areaDescEn : item.areaDescZh}</div>
          </div>
        ))}
      </div>
    ) : null;
    let auditedStatus = null;
    const annexesUpload = false;
    if (contractorInfo.approved === 1) {
      auditedStatus = <Result status="success" title={formatMessage('baseInfo.approvalStatus')} />;
    } else if (contractorInfo.approved === -1) {
      auditedStatus = <Result status="error" title={formatMessage('baseInfo.disapprovalStatus')} />;
    } else if (contractorInfo.approved === 0) {
      auditedStatus = (
        <Result status="warning" title={formatMessage('baseInfo.needApprovalStatus')} />
      );
    }
    return (
      <PageHeaderWrapper>
        <Spin spinning={!!detailLoading || pdfDownLoading} size="large">
          <Modal
            title=""
            visible={qrcodemodal}
            onCancel={() => {
              this.setState({
                qrcodemodal: false,
              })
            }}
            onOk={() => this.setState({
              qrcodemodal: false,
            })}
          >
            <div>
              <img
                src={
                  contractorInfo.recoimage
                }
              // width={104}
              // height={104}
              />
            </div>
          </Modal>
          <Modal
            visible={previewVisible}
            footer={null}
            maskClosable
            onCancel={() => {
              this.handlePhotographClose();
            }}
          >
            <img alt="example" style={{ width: '100%' }} src={previewImage} />
          </Modal>
          <div className={`${Style.bodyWrapper}`}>
            <div
              className={`${Style.body} ${Style.disabled}`}
              id="staffDetailBody"
            >
              <div className={Style.excelTitle}>
                <h1>AIRPORT AUTHORITY HONG KONG</h1>
                <h1>PROJECT SITE</h1>
                <h1>APPLICATION FOR CONTRACTORS&apos; SECURITY PASS</h1>
              </div>
              <Form labelAlign="right" onSubmit={this.handleSubmit}>
                <div className={Style.part}>
                  <div className={Style.title}>
                    <strong>Part A</strong>
                    <i>(TO BE COMPLETED BY THE APPLICANT)</i>
                  </div>
                  <div className={Style.main}>
                    <div className={Style.index}>1</div>
                    <div className={Style.detailWrapper}>
                      <div>Applicant's Particulars</div>
                      <div className={Style.table}>
                        <div className={Style.row}>
                          <Form.Item
                            label={formatMessage(
                              'applicationContractor.columns.surname.longText',
                            )}
                          >
                            {getFieldDecorator('name', {
                              initialValue: contractorInfo.name,
                              rules: [
                                {
                                  required: true,
                                  message: formatMessage(
                                    'applicationContractor.columns.surname.errMessage',
                                  ),
                                },
                              ],
                            })(<Input disabled maxLength={50} className={Style.inputs} />)}
                          </Form.Item>
                        </div>
                        <div className={`${Style.row} ${Style.column2}`}>
                          <div>
                            <Form.Item
                              label={formatMessage(
                                'applicationContractor.columns.otherName.name',
                              )}
                            >
                              {getFieldDecorator('other_name', {
                                initialValue: contractorInfo.other_name,
                              })(<Input disabled maxLength={50} />)}
                            </Form.Item>
                          </div>
                          <div>
                            <Form.Item
                              label={formatMessage('applicationContractor.columns.sex.name')}
                            >
                              {getFieldDecorator('sex', {
                                rules: [
                                  {
                                    required: true,
                                    message: formatMessage(
                                      'applicationContractor.columns.sex.errMessage',
                                    ),
                                  },
                                ],
                                initialValue: contractorInfo.sex,
                              })(
                                <Radio.Group disabled>
                                  <Radio value={0}>{formatMessage('baseInfo.male')}</Radio>
                                  <Radio value={1}>{formatMessage('baseInfo.female')}</Radio>
                                </Radio.Group>,
                              )}
                            </Form.Item>
                          </div>
                        </div>
                        <div className={Style.row}>
                          <Form.Item
                            label={formatMessage('applicationContractor.columns.nameAlias.name')}
                          >
                            {getFieldDecorator('chi_name', { initialValue: contractorInfo.chi_name })(
                              <Input disabled maxLength={50} className={Style.inputs} />,
                            )}
                          </Form.Item>
                        </div>
                        <div className={Style.row}>
                          <Form.Item
                            label={
                              <div
                                style={{
                                  display: 'inline-block',
                                  lineHeight: '24px',
                                }}
                              >
                                Hong Kong Identity Card / Passport /
                                <br />
                                Imported Labour Identity Card Number:
                              </div>
                            }
                            colon={false}
                          >
                            {getFieldDecorator('identity_card', {
                              initialValue: contractorInfo.identity_card,
                              rules: [
                                {
                                  required: true,
                                  message: formatMessage(
                                    'applicationContractor.columns.identityCard.errMessage',
                                  ),
                                },
                              ],
                            })(<Input disabled maxLength={50} />)}
                          </Form.Item>
                          <Form.Item
                            label={formatMessage('applicationContractor.columns.annexes.name')}
                          >
                            {Array.isArray(contractorInfo.id_base64)
                              ? contractorInfo.id_base64.map((item, index) => (
                                <div key={index}>
                                  <Button
                                    type="link"
                                    onClick={() => this.handlePhotographPreview(item)}
                                  >
                                    {item.name}
                                  </Button>
                                </div>
                              ))
                              : null}
                          </Form.Item>
                        </div>
                        {/* <div className={Style.row}>
                      </div> */}
                        <div className={Style.row}>
                          <Form.Item
                            label={formatMessage('applicationContractor.columns.telephone.name')}
                          >
                            {getFieldDecorator('tel', {
                              initialValue: contractorInfo.tel,
                              rules: [
                                {
                                  required: true,
                                  message: formatMessage(
                                    'applicationContractor.columns.telephone.errMessage',
                                  ),
                                },

                                {
                                  pattern: '^[0-9]{8,8}$',
                                  message: formatMessage(
                                    'applicationContractor.columns.emergencyContactedName.rez',
                                  ),
                                },
                              ],
                            })(<Input disabled maxLength={50} />)}
                          </Form.Item>

                        </div>
                      </div>
                    </div>
                  </div>
                  <div className={Style.main}>
                    <div className={Style.index}>2</div>
                    <div className={Style.detailWrapper}>
                      <div>In case of Escort Person the following person should be contacted :</div>
                      <div className={Style.table}>

                        <div className={Style.row}>
                        </div>
                        <div className={`${Style.row} ${Style.column2}`}>
                          <div>
                            <Form.Item
                              label={formatMessage(
                                'applicationContractor.temporary.escortername',
                              )}
                            >
                              {getFieldDecorator('escorter_name', {
                                initialValue: contractorInfo.escorter_name,
                                rules: [
                                  {
                                    required: true,
                                    message: formatMessage(
                                      'applicationContractor.temporary.errMessage.escname',
                                    ),
                                  },
                                ],
                              })(<Input disabled maxLength={50} />)}
                            </Form.Item>
                          </div>
                          <div>
                            <Form.Item
                              label={formatMessage('applicationContractor.columns.nameAlias.name')}
                            >
                              {getFieldDecorator('escorter_chi_name', {
                                initialValue: contractorInfo.escorter_chi_name,
                              })(
                                <Input maxLength={50} disabled className={Style.inputs} />,
                              )}
                            </Form.Item>
                          </div>
                        </div>
                        <div className={Style.row}>
                          <Form.Item
                            label={formatMessage(
                              'applicationContractor.temporary.escorterpass',
                            )}
                          >
                            {getFieldDecorator('escorter_pass', {
                              initialValue: contractorInfo.escorter_pass,
                              rules: [
                                {
                                  required: true,
                                  message: formatMessage(
                                    'applicationContractor.temporary.errMessage.escpass',
                                  ),
                                },
                              ],
                            })(<Input disabled maxLength={50} />)}
                          </Form.Item>
                        </div>
                        <div className={Style.row}>
                          <Form.Item
                            label={formatMessage(
                              'applicationContractor.temporary.escortertel',
                            )}
                          >
                            {getFieldDecorator('escorter_tel', {
                              initialValue: contractorInfo.escorter_tel,
                              rules: [
                                {
                                  required: true,
                                  message: formatMessage(
                                    'applicationContractor.temporary.errMessage.esctel',
                                  ),
                                },
                              ],
                            })(<Input disabled maxLength={50} />)}
                          </Form.Item>
                        </div>

                      </div>
                    </div>
                  </div>
                </div>
                <div className={Style.part}>
                  <div className={Style.title}>
                    <strong>Part B</strong>
                    <i>(TO BE COMPLETED BY THE CONTRACTOR CONCERNED)</i>
                  </div>
                  <div className={Style.main}>
                    <div className={Style.detailWrapper}>
                      {/* eslint-disabled-next-line react/no-unescaped-entities */}
                      <div>To Security Manager ( Airport Authority Hong Kong )</div>
                      <div className={Style.table}>
                        <div className={Style.row}>
                          {/* <Form.Item
                          label={formatMessage('applicationContractor.columns.contractNumber.name')}
                        >
                          {getFieldDecorator('contractNumber', {
                            rules: [
                              {
                                required: true,
                                message: formatMessage(
                                  'applicationContractor.columns.contractNumber.errMessage',
                                ),
                              },
                            ],
                          })(<Input maxLength={50} />)}
                        </Form.Item> */}
                          <Form.Item
                            label={formatMessage('applicationContractor.columns.contractNumber.name')}
                          >
                            {getFieldDecorator('contract_number', {
                              initialValue: contractorInfo.contract_number,
                              rules: [
                                {
                                  required: true,
                                  message: formatMessage(
                                    'applicationContractor.columns.contractNumber.errMessage',
                                  ),
                                },
                              ],
                            })(
                              <CreatableSelect
                                isDisabled
                                styles={{
                                  menu: base => ({
                                    ...base,
                                    zIndex: 10,
                                  }),
                                  // control: base => ({
                                  //   ...base,
                                  //   height: '35px !important',
                                  // }),
                                  input: base => ({
                                    ...base,
                                    // height: '35px !important',
                                    // backgroundColor: 'pink',

                                  }),
                                  multiValue: base => ({
                                    ...base,
                                    // backgroundColor: 'pink',
                                    // height: '25px !important',
                                    display: 'flex',
                                    alignItems: 'center',
                                  }),
                                  valueContainer: base => ({
                                    ...base,
                                    height: '45px !important',
                                  }),
                                }}
                                style={{ height: 20 }}
                                menuIsOpen={menuIsopen}
                                onMenuOpen={() => {
                                  this.setState({
                                    menuIsopen: !menuIsopen,
                                  })
                                }}
                                onMenuClose={() => {
                                  if (creatSeleteModal) {
                                    return;
                                  }
                                  this.setState({
                                    menuIsopen: false,
                                  })
                                }}
                                // isMulti
                                components={{ Option: e => this.Option(e, 'con') }}
                                onCreateOption={this.onCreateMainList}
                                onChange={this.onChangeMainList}
                                options={mainContractorList}
                                placeholder={formatMessage('baseInfo.placeholderChecked')}
                              />,
                            )}
                          </Form.Item>
                        </div>
                        <div className={Style.row}>
                          <Form.Item
                            label={formatMessage(
                              'applicationContractor.columns.contractSubcontractor.name',
                            )}
                          >
                            {getFieldDecorator('sub_contractor', {
                              initialValue: contractorInfo.sub_contractor,
                              rules: [
                                {
                                  required: true,
                                  message: formatMessage(
                                    'applicationContractor.columns.contractNumber.errcontraMsg',
                                  ),
                                },
                              ],
                            })(
                              <Select
                                disabled
                                showSearch
                                style={{ width: '100%' }}
                                placeholder={formatMessage('baseInfo.placeholderChecked')}
                                optionFilterProp="children"
                                loading={subcontractor === null}
                                filterOption={(input, option) =>
                                  option.props.children
                                    .toLowerCase()
                                    .indexOf(input.toLowerCase()) >= 0
                                }
                              >
                                {Array.isArray(subcontractor)
                                  ? subcontractor.map(item => (
                                    <Select.Option key={item.id}>{`${item.name}`}</Select.Option>
                                  ))
                                  : null}
                              </Select>,
                            )}
                          </Form.Item>
                        </div>
                        <div className={`${Style.row}`}>
                          <div style={{ display: 'flex' }}>
                            <Form.Item
                              label={formatMessage('applicationContractor.text.partB.atteify')}
                            >
                              {getFieldDecorator('approve_text', {
                                rules: [
                                  {
                                    required: true,
                                    message: formatMessage(
                                      'applicationCommon.workerCard.name.errMessage',
                                    ),
                                  },
                                ],
                              })(
                                <Checkbox
                                  disabled
                                  checked
                                  name="approve_text"
                                ></Checkbox>,
                              )}
                            </Form.Item>
                          </div>
                        </div>
                        <div className={`${Style.row}`}>
                          <div style={{ display: 'flex' }}>
                            <Form.Item
                              label={formatMessage('applicationContractor.text.partB.depm')}
                            >
                              {getFieldDecorator('approve_text2', {
                                rules: [
                                  {
                                    required: true,
                                    message: formatMessage(
                                      'applicationCommon.workerCard.name.errMessage',
                                    ),
                                  },
                                ],
                              })(
                                <Checkbox
                                  disabled
                                  checked
                                  name="approve_text2"
                                ></Checkbox>,
                              )}
                            </Form.Item>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <div className={Style.part}>
                  <div className={Style.title}>
                    <strong>Part C</strong>
                    <i>(TO BE COMPLETED BY SECURITY DEPARTMENT AIRPORT AUTHORITY HONG KONG)</i>
                  </div>
                  <div className={Style.main}>
                    <div className={Style.detailWrapper}>
                      {/* eslint-disabled-next-line react/no-unescaped-entities */}
                      <div>{formatMessage('applicationContractor.text.partC.relevant')}</div>
                      <div className={Style.table}>
                        <div className={Style.row}>
                          <Form.Item
                            label={formatMessage('applicationCommon.workerCard.expiredDate.nametem')}
                          >
                            {getFieldDecorator('expire_time', {
                              initialValue: contractorInfo.expire_time
                                ? moment(contractorInfo.expire_time)
                                : null,
                              rules: [
                                {
                                  required: true,
                                  message: formatMessage(
                                    'applicationCommon.workerCard.expiredDate.errMessage',
                                  ),
                                },
                              ],
                            })(<DatePicker disabled format={formatMessage('datetimeFormat.date')} />)}
                          </Form.Item>
                        </div>
                        <div className={Style.row}>
                          <Form.Item
                            label={formatMessage('applicationContractor.columns.checkedReasons.name')}
                          >
                            {getFieldDecorator('reasons', {
                              initialValue: contractorInfo.reasons,
                            })(<Input disabled maxLength={50} />)}
                          </Form.Item>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div className={Style.part} >
                  <div className={Style.title}>
                    <strong>Card</strong>
                  </div>
                  <div className={Style.main}>
                    <div className={Style.detailWrapper}>
                      <div className={Style.table}>
                        {/* 绿卡 */}
                        <div className={Style.row}>
                          <FormattedMessage id="applicationCommon.workerCard.greenCard" />
                        </div>
                        <div className={`${Style.row} ${Style.column2}`}>
                          <div>
                            <Form.Item
                              label={formatMessage('applicationCommon.workerCard.name.name')}
                            >
                              {getFieldDecorator('green_card_name', {
                                initialValue: WorkCardDefault.greenCard,
                                rules: [
                                  {
                                    required: false,
                                    message: formatMessage(
                                      'applicationCommon.workerCard.name.errMessage',
                                    ),
                                  },
                                ],
                              })(<Input disabled maxLength={50} />)}
                            </Form.Item>
                          </div>
                          <div>
                            <Form.Item label={formatMessage('applicationCommon.workerCard.num.name')}>
                              {getFieldDecorator('green_card_number', {
                                initialValue: contractorInfo.green_card_number,
                                rules: [
                                  {
                                    required: false,
                                    message: formatMessage(
                                      'applicationCommon.workerCard.num.errMessage',
                                    ),
                                  },
                                ],
                              })(<Input disabled maxLength={50} autoComplete="off" />)}
                            </Form.Item>
                          </div>
                          <div>
                            <Form.Item
                              label={formatMessage('applicationCommon.workerCard.expiredDate.nametem')}
                            >
                              {getFieldDecorator('green_card_expire', {
                                initialValue: contractorInfo.green_card_expire
                                  ? moment(contractorInfo.green_card_expire)
                                  : null,
                                rules: [
                                  {
                                    required: form.getFieldValue('green_card_number'),
                                    message: formatMessage(
                                      'applicationCommon.workerCard.expiredDate.errMessage',
                                    ),
                                  },
                                ],
                              })(<DatePicker disabled format={formatMessage('datetimeFormat.date')} />)}
                            </Form.Item>
                          </div>
                        </div>
                        <Form.Item
                          label={formatMessage('applicationContractor.columns.annexes.name')}
                        >
                          {Array.isArray(contractorInfo.green_base64)
                            ? contractorInfo.green_base64.map((item, index) => (
                              // eslint-disabled-next-line react/no-array-index-key
                              <div key={index}>
                                <Button
                                  type="link"
                                  onClick={() => this.handlePhotographPreview(item)}
                                >
                                  {item.name}
                                </Button>
                              </div>
                            ))
                            : null}
                        </Form.Item>
                        {/* 工人注册卡 */}
                        <div className={Style.row}>
                          <FormattedMessage id="applicationCommon.workerCard.registerCard" />
                        </div>
                        <div className={`${Style.row} ${Style.column2}`}>
                          <div>
                            <Form.Item
                              label={formatMessage('applicationCommon.workerCard.name.name')}
                            >
                              {getFieldDecorator('registration_card_name', {
                                initialValue: WorkCardDefault.registerCard,
                                rules: [
                                  {
                                    required: false,
                                    message: formatMessage(
                                      'applicationCommon.workerCard.name.errMessage',
                                    ),
                                  },
                                ],
                              })(<Input disabled maxLength={50} />)}
                            </Form.Item>
                          </div>
                          <div>
                            <Form.Item label={formatMessage('applicationCommon.workerCard.num.name')}>
                              {getFieldDecorator('registration_card_number', {
                                initialValue: contractorInfo.registration_card_number,
                                rules: [
                                  {
                                    required: false,
                                    message: formatMessage(
                                      'applicationCommon.workerCard.num.errMessage',
                                    ),
                                  },
                                ],
                              })(<Input disabled maxLength={50} autoComplete="off" />)}
                            </Form.Item>
                          </div>
                          <div>
                            <Form.Item
                              label={formatMessage('applicationCommon.workerCard.expiredDate.nametem')}
                            >
                              {getFieldDecorator('registration_card_expire', {
                                initialValue: contractorInfo.registration_card_expire
                                  ? moment(contractorInfo.registration_card_expire)
                                  : null,
                                rules: [
                                  {
                                    required: form.getFieldValue('workerCardNo2'),
                                    message: formatMessage(
                                      'applicationCommon.workerCard.expiredDate.errMessage',
                                    ),
                                  },
                                ],
                              })(<DatePicker disabled format={formatMessage('datetimeFormat.date')} />)}
                            </Form.Item>
                          </div>

                        </div>
                        <Form.Item
                          label={formatMessage('applicationContractor.columns.annexes.name')}
                        >
                          {Array.isArray(contractorInfo.regist_base64)
                            ? contractorInfo.regist_base64.map((item, index) => (
                              // eslint-disabled-next-line react/no-array-index-key
                              <div key={index}>
                                <Button
                                  type="link"
                                  onClick={() => this.handlePhotographPreview(item)}
                                >
                                  {item.name}
                                </Button>
                              </div>
                            ))
                            : null}
                        </Form.Item>

                        {/* 疫苗日期 */}
                        <div className={Style.row}>
                          <FormattedMessage id="applicationCommon.workerCard.vaccinationstem_date" />
                        </div>
                        <div className={`${Style.row} ${Style.column2}`}>
                          <div>
                            <Form.Item
                              label={formatMessage('applicationCommon.workerCard.vaccinationstem_date1')}
                            >
                              {getFieldDecorator('vaccination_date1', {
                                initialValue: contractorInfo.vaccination_date1
                                  ? moment(contractorInfo.vaccination_date1)
                                  : null,
                                rules: [
                                  {
                                    required: false,
                                    message: formatMessage(
                                      'applicationCommon.workerCard.expiredDate.errMessage',
                                    ),
                                  },
                                ],
                              })(
                                <DatePicker
                                  disabled
                                  onChange={() => this.onChangeDate(1)}
                                  format={formatMessage('datetimeFormat.date')}
                                />,
                              )}
                            </Form.Item>
                          </div>
                          <div>
                            <Form.Item
                              label={formatMessage('applicationCommon.workerCard.vaccinationstem_date2')}
                            >
                              {getFieldDecorator('vaccination_date2', {
                                initialValue: contractorInfo.vaccination_date2
                                  ? moment(contractorInfo.vaccination_date2)
                                  : null,
                                rules: [
                                  {
                                    required: false,
                                    message: formatMessage(
                                      'applicationCommon.workerCard.expiredDate.errMessage',
                                    ),
                                  },
                                ],
                              })(
                                <DatePicker
                                  disabled={!form.getFieldValue('vaccination_date1')}
                                  onChange={() => this.onChangeDate(2)}
                                  format={formatMessage('datetimeFormat.date')}
                                />,
                              )}
                            </Form.Item>
                          </div>
                          <div>
                            <Form.Item
                              label={formatMessage('applicationCommon.workerCard.vaccinationstem_date3')}
                            >
                              {getFieldDecorator('vaccination_date3', {
                                initialValue: contractorInfo.vaccination_date3
                                  ? moment(contractorInfo.vaccination_date3)
                                  : null,
                                rules: [
                                  {
                                    required: false,
                                    message: formatMessage(
                                      'applicationCommon.workerCard.expiredDate.errMessage',
                                    ),
                                  },
                                ],
                              })(
                                <DatePicker
                                  disabled={
                                    !(
                                      form.getFieldValue('vaccination_date1') &&
                                      form.getFieldValue('vaccination_date2')
                                    )
                                  }
                                  onChange={() => this.onChangeDate(3)}
                                  format={formatMessage('datetimeFormat.date')}
                                />,
                              )}
                            </Form.Item>
                          </div>
                        </div>
                        <div className={`${Style.row} ${Style.column3}`}>
                          <div>
                            <Form.Item
                              label={formatMessage('applicationCommon.workerCard.vaccinationstem_date4')}
                            >
                              {getFieldDecorator('vaccination_date4', {
                                initialValue: contractorInfo.vaccination_date4
                                  ? moment(contractorInfo.vaccination_date4)
                                  : null,
                                rules: [
                                  {
                                    required: false,
                                    message: formatMessage(
                                      'applicationCommon.workerCard.expiredDate.errMessage',
                                    ),
                                  },
                                ],
                              })(
                                <DatePicker
                                  disabled={
                                    !(
                                      form.getFieldValue('vaccination_date1') &&
                                      form.getFieldValue('vaccination_date2') &&
                                      form.getFieldValue('vaccination_date3')
                                    )
                                  }
                                  onChange={() => this.onChangeDate(4)}
                                  format={formatMessage('datetimeFormat.date')}
                                />,
                              )}
                            </Form.Item>
                          </div>
                          <div>
                            <Form.Item
                              label={formatMessage('applicationCommon.workerCard.vaccinationstem_date5')}
                            >
                              {getFieldDecorator('vaccination_date5', {
                                initialValue: contractorInfo.vaccination_date5
                                  ? moment(contractorInfo.vaccination_date5)
                                  : null,
                                rules: [
                                  {
                                    required: false,
                                    message: formatMessage(
                                      'applicationCommon.workerCard.expiredDate.errMessage',
                                    ),
                                  },
                                ],
                              })(
                                <DatePicker
                                  disabled={
                                    !(
                                      form.getFieldValue('vaccination_date1') &&
                                      form.getFieldValue('vaccination_date2') &&
                                      form.getFieldValue('vaccination_date3') &&
                                      form.getFieldValue('vaccination_date4')
                                    )
                                  }
                                  onChange={() => this.onChangeDate(5)}
                                  format={formatMessage('datetimeFormat.date')}
                                />,
                              )}
                            </Form.Item>
                          </div>
                        </div>
                        <Form.Item
                          label={formatMessage('applicationContractor.columns.annexes.name')}
                        >
                          {Array.isArray(contractorInfo.exemption_base64)
                            ? contractorInfo.exemption_base64.map((item, index) => (
                              // eslint-disabled-next-line react/no-array-index-key
                              <div key={index}>
                                <Button
                                  type="link"
                                  onClick={() => this.handlePhotographPreview(item)}
                                >
                                  {item.name}
                                </Button>
                              </div>
                            ))
                            : null}
                        </Form.Item>

                        <div className={Style.row}>
                          <FormattedMessage id="applicationCommon.workerCard.includetem" />
                        </div>
                        <div className={`${Style.row} ${Style.column2}`}>
                          <div style={{ display: 'flex' }}>
                            <Form.Item
                              label={formatMessage('applicationCommon.workerCard.includetem')}
                            >
                              {getFieldDecorator('exemption_certificate', {
                                initialValue: contractorInfo.exemption_certificate,
                                rules: [
                                  {
                                    required: false,
                                    message: formatMessage(
                                      'applicationCommon.workerCard.name.errMessage',
                                    ),
                                  },
                                ],
                              })(
                                <Checkbox
                                  disabled
                                  checked={form.getFieldValue('exemption_certificate')}
                                  name="exemption_certificate"
                                ></Checkbox>,
                              )}
                            </Form.Item>
                            <Form.Item
                              label={formatMessage('applicationCommon.workerCard.expiredDate.nametem')}
                            >
                              {getFieldDecorator('vacc_expire', {
                                initialValue: contractorInfo.vacc_expire
                                  ? moment(contractorInfo.vacc_expire)
                                  : null,
                                rules: [
                                  {
                                    required: form.getFieldValue('exemption_certificate'),
                                    message: formatMessage(
                                      'applicationCommon.workerCard.name.errMessage',
                                    ),
                                  },
                                ],
                              })(
                                <DatePicker
                                  disabled
                                  format={formatMessage('datetimeFormat.date')}
                                />,
                              )}
                            </Form.Item>
                          </div>
                        </div>
                        <Form.Item
                          label={formatMessage('applicationContractor.columns.annexes.name')}
                        >
                          {Array.isArray(contractorInfo.vacc_base64)
                            ? contractorInfo.vacc_base64.map((item, index) => (
                              // eslint-disabled-next-line react/no-array-index-key
                              <div key={index}>
                                <Button
                                  type="link"
                                  onClick={() => this.handlePhotographPreview(item)}
                                >
                                  {item.name}
                                </Button>
                              </div>
                            ))
                            : null}
                        </Form.Item>
                        <div className={Style.row}>
                          <FormattedMessage id="applicationContractor.temporary.email" />
                        </div>
                        <div className={`${Style.row}`}>
                          <div>
                            <Form.Item
                              label={formatMessage('applicationContractor.temporary.email')}
                            >
                              {getFieldDecorator('email', {
                                initialValue: contractorInfo.email,
                                rules: [
                                  {
                                    required: true,
                                    message: formatMessage(
                                      'applicationContractor.temporary.errMessage.email',
                                    ),
                                  },
                                ],
                              })(<Input disabled maxLength={255} />)}
                            </Form.Item>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div className={Style.bottom}>
                  <div className={Style.bottom}>
                    <Button htmlType="button" icon="rollback" onClick={this.handleGoBack}>
                      {formatMessage('button.rollback')}
                    </Button>
                    <Authorized authority={Power.TemporaryApplication.modify}>
                      <Button
                        type="primary"
                        htmlType="button"
                        icon="edit"
                        onClick={this.handleUpdate}
                      >
                        {formatMessage('button.update')}
                      </Button>
                    </Authorized>
                    <Authorized authority={Power.TemporaryApplication.preview}>
                      <Button htmlType="button" icon="file-image" onClick={this.onPreviewClick}>
                        {formatMessage('applicationContractor.temporary.qrcode')}
                      </Button>
                    </Authorized>
                    <Authorized authority={Power.StaffApplication.preview}>
                      <Button htmlType="button" icon="download" onClick={this.toHtml2Canvas}>
                        {formatMessage('button.download')}
                      </Button>
                    </Authorized>
                    {
                      contractorInfo.card_type !== 1 ? (
                        <Button htmlType="button" icon="add" onClick={this.trdPass}>
                          {formatMessage('applicationContractor.temporary.trdpass')}
                        </Button>
                      ) : null
                    }
                  </div>
                </div>
              </Form>
            </div>
          </div>
        </Spin >
      </PageHeaderWrapper >
    );
  }
}

export default Index;
